<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <!-- 引入 Vue.js 3 和 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div class="chatroom">
        <div class="chat-history">
            <div v-for="(msg, index) in messages" :key="index" class="chat-message">
                <div class="message-text" :class="msg.sender">{{ msg.text }}</div>
            </div>
        </div>
        <div class="chat-input">
            <input v-model="userInput" @keydown.enter="sendMessage" placeholder="输入你的消息..." />
            <button @click="sendMessage">发送</button>
        </div>
    </div>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                messages: [],
                userInput: '',
                socket: null, // WebSocket实例
            };
        },
        methods: {
            // 初始化WebSocket连接
            initWebSocket() {
                this.socket = new WebSocket('ws://yourserver.com/ws/chat'); // 替换为你自己的 WebSocket 地址
                this.socket.onmessage = this.handleMessage;
                this.socket.onopen = () => {
                    console.log('WebSocket连接成功');
                };
                this.socket.onerror = (error) => {
                    console.error('WebSocket连接失败:', error);
                };
            },
            // 发送消息到服务器
            sendMessage() {
                if (!this.userInput.trim()) return;
                this.messages.push({ text: this.userInput, sender: 'user' });

                // 发送到 WebSocket 服务器
                this.socket.send(JSON.stringify({ message: this.userInput }));

                // 清空输入框
                this.userInput = '';
            },
            // 处理 WebSocket 接收到的消息
            handleMessage(event) {
                const message = JSON.parse(event.data);
                this.messages.push({ text: message.text, sender: 'system' });
            }
        },
        mounted() {
            this.initWebSocket();
        }
    });

    app.mount('#app');
</script>

<style>
    .chatroom {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .chat-history {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }
    .chat-message {
        margin: 10px 0;
    }
    .message-text {
        padding: 8px;
        border-radius: 5px;
        max-width: 60%;
    }
    .message-text.user {
        background-color: #d1f7c4;
        margin-left: auto;
    }
    .message-text.system {
        background-color: #f1f1f1;
    }
    .chat-input {
        display: flex;
        padding: 10px;
        background-color: #fff;
    }
    .chat-input input {
        flex: 1;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .chat-input button {
        padding: 8px 16px;
        margin-left: 10px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
</style>
</body>
</html>
